<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery选择器——属性过滤选择器</title>
    <script type="application/javascript" src="../../jquery/jquery-1.8.0.min.js"></script>
    <style type="text/css">
        body {font-size:12px;text-align: center;}
        div,span { float:left; margin:8px; border: solid 1px #666 ; width: 100px; height: 100px; display:none;}
    </style>
</head>
<body>
    <div id="divID">DIVID</div>
    <div title="A">A</div>
    <div id="divAB" title="AB">id:DIVAB<BR/>title:AB</div>
    <div title="ABC">ABC</div>
</body>
<script type="application/javascript">
    // 属性过滤选择器：

    $(function () {
        /*包含attr属性的元素([attr])*/
        $("div[id]").show(1000); // DIVID id:DIVAB<BR/>title:AB
        /*包含attr属性并且值为xx的元素([attr='xx'])*/
        $("div[title='A']").show(1000); // A
        /*包含attr属性并且值不为xx的元素([attr!='xx'])*/
        $("div[title!='A']").show(1000); // DIVID id:DIVAB<BR/>title:AB ABC
        /*包含attr属性并且值以xx开头的元素([attr^='xx'])*/
        $("div[title^='A']").show(1000); // A id:DIVAB<BR/>title:AB  ABC
        /*包含attr属性并且值以xx结尾的元素([attr$='xx'])*/
        $("div[title$='C']").show(1000); // ABC
        /*包含attr属性并且值包含xx的元素([attr*='xx'])*/
        $("div[title*='B']").show(1000); // id:DIVAB<BR/>title:AB  ABC
        /*多个复合选择器的使用*/
        $("div[id^='div'][title*='A']").show(1000); // id:DIVAB<BR/>title:AB
    });
</script>
</html>